<template>
  <div class="container">
    <xy-table
      ref="table"
      :columns="columns"
      :list="model.list"
      :param="params"
      :TotalCount="TotalCount"
    >
      <template slot="addItem">
        <search-header :model="params" :on-search="onSearch"> </search-header>
      </template>
      <el-row slot="cards" :gutter="16" class="mb-1 mt-1">
        <el-col :span="6">
          <el-card>
            <div class="row">
              <div class="col-1 icon">
                <i class="el-icon-user mr-1"></i>
              </div>
              <div class="card-body col-1">
                <div class="title">
                  {{ $language.local("MCount") }}
                </div>
                <div class="num">
                  {{ model.MCount }}
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="row">
              <div class="col-1 icon">
                <i class="el-icon-s-custom mr-1"></i>
              </div>
              <div class="card-body col-1">
                <div class="title">
                  {{ $language.local("ACount") }}
                </div>
                <div class="num">
                  {{ model.ACount }}
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="row">
              <div class="col-1 icon">
                <i class="iconfont icon-weixinzhifu1 mr-1 green"></i>
              </div>
              <div class="card-body col-1">
                <div class="title">
                  {{ $language.local("RAmount") }}
                </div>
                <div class="num">
                  {{ model.RAmount }}
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="row">
              <div class="col-1 icon">
                <i class="iconfont icon-yue mr-1"></i>
              </div>
              <div class="card-body col-1">
                <div class="title">
                  {{ $language.local("PAmount") }}
                </div>
                <div class="num">
                  {{ model.PAmount }}
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <template #operation="">
        <span></span>
      </template>
    </xy-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: {
        real_name: "金则炎",
        agentTotal: 5,
        agentThisMonthTotal: "本月新增代理商",
        MerchantTotal: "发展客户数",
        MerchantThisMonthTotal: "本月新增	",
        ThisMonthRechargeAmount: "本月充值累计",
        RechargeAmount: "本年充值金额累计",
        ThisMonthTotalAmount: "本月代发累计",
        TotalAmount: "本年代发金额累计",
      },
      model: "",
      params: { TradeYM: new Date().format("yyyy年M月") },
      TotalCount: 0,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      let response = await this.$http.get(
        "/api/statistics/WorkStatistics",
        this.params
      );
      console.log(response);
      this.model = response.data.Data;
      this.TotalCount = this.model.list.length;
    },
    onSearch(e) {
      // this.params = e;
      console.log(e);
      console.log(this.$refs.table);
      this.getData(e);
    },
  },
};
</script>

<style lang="less" scoped>
.el-card {
  .row {
    display: flex;
    justify-content: space-between;
    .icon {
      display: flex;
      justify-content: center;
      i {
        font-size: 3rem;
      }
      .iconfont {
        &.green {
          color: green !important;
        }
      }
    }
    .card-body {
      .title {
        color: gray;
        font-size: 12px;
      }
      .num {
        margin-top: 1ex;
        font-size: 1.2rem;
      }
    }
  }
}
</style>
